import React from 'react'
import login from '../../../public/login.jpg'
import { Button, Form, Input, Tabs, Toast } from 'antd-mobile'
import request from '../utils/request'
import { useNavigate } from 'react-router-dom'
function Login() {
  const navigate=useNavigate()
  //登录请求
  const onFinish=async(value)=>{
     console.log(value)
   const res = await request.post('/login',value) 
     console.log(res)
      const {code,data,message}=res.data
      if(code===200)
      {
         //存储token
         localStorage.setItem('token',data.token)
         //成功提示
         Toast.show(message)
         //跳转到首页
         navigate('/')
      }else{
        Toast.show(message)
      }
  }
  return (
    <div style={{width:'100vw',height:'100vh'}}>
      <dl style={{marginLeft:'150px'}}>
        <dt>
          <img src={login} alt="" style={{width:'100px',height:'100px'}}/>
        </dt>
         <dd>
            <h4 style={{marginLeft:'10px'}}>欢迎登录</h4>
         </dd>
      </dl>

      <div>
         <Tabs>
          <Tabs.Tab title='账号登录' key='fruits'>
            <div>

          
            <Form  layout='horizontal'   
            onFinish={onFinish}
            footer={
              <>
               <Button block type='submit' color='primary'>登录</Button>
                <Button block style={{marginTop:'20px'}}>注册</Button>
              </>
            }
            >
              <Form.Item name='username' label="用户">
                 <Input placeholder='用户名/邮箱'/>
              </Form.Item>
              <Form.Item name='password' label="密码">
                  <Input placeholder='登录密码'/>
              </Form.Item>
            </Form>
              </div>
            <span className='wj'>忘记密码</span>

            <div className='text'>
               <span style={{color:'#3b99fc'}}>服务条款</span>
               <span style={{color:'#3b99fc',marginLeft:'15px'}}>隐私权政策</span>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='面容ID登录' key='vegetables'>
            面容ID登录
          </Tabs.Tab>
          
        </Tabs>
      </div>
    </div>
  )
}

export default Login
